---
# title: "Background Clip"
title: "背景图像裁剪"
# description: "Utilities for controlling the bounding box of an element's background."
description: "用于控制元素背景的边界框的实用功能类。"
---

import plugin from 'tailwindcss/lib/plugins/backgroundClip'
import { ConfigSample } from '@/components/ConfigSample'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用

<!-- Use the `bg-clip-{keyword}` utilities to control the bounding box of an element's background. -->
使用 `bg-clip-{keyword}` 功能类来控制元素背景的边界框。

```html indigo
<template preview>
  <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
    <div class="bg-clip-border p-6 rounded-md bg-indigo-600 border-4 border-indigo-300 border-dashed font-extrabold text-white flex justify-center items-center">
      <span class="py-2">.bg-clip-border</span>
    </div>
    <div class="bg-clip-padding p-6 rounded-md bg-indigo-600 border-4 border-indigo-300 border-dashed font-extrabold text-white flex justify-center items-center">
      <span class="py-2">.bg-clip-padding</span>
    </div>
    <div class="bg-clip-content p-6 rounded-md bg-indigo-600 border-4 border-indigo-300 border-dashed font-extrabold text-white flex justify-center items-center">
      <span class="py-2">.bg-clip-content</span>
    </div>
  </div>
</template>

<div class="**bg-clip-border** p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
<div class="**bg-clip-padding** p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
<div class="**bg-clip-content** p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
```

<!-- ## Cropping to text -->
## 裁切成文本

<!-- Use `bg-clip-text` to crop an element's background to match the shape of the text. Useful for effects where you want a background image to be visible through the text. -->
使用 `bg-clip-text` 来裁剪元素的背景以匹配文本的形状。对于您想让背景图片通过文本可见的效果很有用。

```html emerald
<template preview>
  <div class="text-center text-5xl font-extrabold leading-none tracking-tight">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">
      Hello world
    </span>
  </div>
</template>

<div class="text-5xl font-extrabold ...">
  <span class="**bg-clip-text** text-transparent bg-gradient-to-r from-green-400 to-blue-500">
    Hello world
  </span>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the bounding box of an element's background at a specific breakpoint, add a `{screen}:` prefix to any existing background clip utility. For example, adding the class `md:bg-clip-padding` to an element would apply the `bg-clip-padding` utility at medium screen sizes and above. -->
要在特定的断点处控制元素背景的边界框，请在任何现有的背景剪辑功能类中添加 `{screen}:` 前缀。例如，将 `md:bg-clip-padding` 类添加到一个元素中，就可以在中等尺寸以上的屏幕上应用 `bg-clip-padding` 功能类。

```html
<div class="bg-clip-border **md:bg-clip-padding**">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义 

<!-- ### Variants -->
### 变体

<Variants plugin="backgroundClip" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="backgroundClip" />
